<template>
  <div class="bar-topic">
    <div class="index-content-bar">
      <!--选项区域-->
      <div class="options">
        <el-link ref="linkId1" :type="focusState === false ? 'default' :'primary'" :underline="false" @click="getDynamic()" style="margin-left: 25px;margin-top: 15px">动态</el-link>
        <el-link ref="linkId2" :type="recommendState === false ? 'default' :'primary'" :underline="false" @click="getArticle()" style="margin-left: 45px;margin-top: 15px">推荐</el-link>
        <el-link ref="linkId3" :type="hotState === false ? 'default' :'primary'" :underline="false" @click="getGambit()" style="margin-left: 45px;margin-top: 15px">热议</el-link>
      </div>
      <div>
        <!--分割线-->
        <el-divider/>
      </div>
      <!--选项区域选择后子组件显示此处-->
      <keep-alive>
          <router-view/>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: "articleOption",
  data:function (){
    return{
      recommendState:false,
      hotState:false,
      focusState:false
    }
  },
  methods:{
    getArticle(){
      this.recommendState=true;
      this.hotState=false;
      this.focusState=false;
      this.$router.push("/")
    },
    getDynamic(){
      this.recommendState=false;
      this.hotState=false;
      this.focusState=true;
      this.$router.push("/focus")
    },
    getGambit(){
      this.recommendState=false;
      this.hotState=true;
      this.focusState=false;
      this.$router.push('/hot')
    },
  },
  watch:{
    '$route.path': {
      handler(toPath){
        if (toPath === '/'){
          this.getArticle()
        }else if(toPath === '/focus'){
          this.getDynamic()
        }else if (toPath === '/hot'){
          this.getGambit()
        }
      },
      deep: true, // 深度监听
      immediate: true, // 第一次初始化渲染就可以监听到
    }
  },
  mounted() {
    document.title="首页 - 贴乎";
  }
}
</script>

<style scoped>
.bar-topic{
  float: left;
  width: 69%;
}
.index-content-bar{
  height: 100%;
  margin-top: 10px;
  box-shadow: 0 2px 59px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
</style>